<template>
  <div style="width: 100%; height: 100%;overflow:hidden">
    <p>本网站一共被访问：{{ visitedCount }} 次</p>
    <div class="login-1">
      <div class="login-2">
        <div class="login-3">
          欢迎登录 杭电Online!
        </div>
        <el-form
            :model="form"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            v-show="!loginByPhone"
        >

          <el-form-item label="用户名" prop="username">
            <el-input
                placeholder="账号名"
                v-model="form.username"
            />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
                placeholder="密码"
                type="password"
                v-model="form.password"
                autocomplete="off"
            />
          </el-form-item>
          <el-form-item prop="agree" style="margin-left: 50px" label-width="22px">
            <el-checkbox size="large" v-model="Agreed">
              我已同意隐私条款和服务条款
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="login">登录</el-button>

            <el-button plain @click="register">注册</el-button>
            <el-button plain @click="loginByPhone=!loginByPhone">手机登录</el-button>
          </el-form-item>
        </el-form>

        <el-form
            status-icon
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            v-show="loginByPhone"
        >

          <el-form-item label="手机号" >
            <el-input
                placeholder="15位手机号"
                v-model="phoneNumber"
            />
          </el-form-item>

          <el-form-item label="验证码">
            <el-input
                placeholder="6位验证码"
                v-model="phoneCode"
                autocomplete="off"
            />
          </el-form-item>
          <el-form-item prop="agree" style="margin-left: 50px" label-width="22px">
            <el-checkbox size="large" v-model="Agreed">
              我已同意隐私条款和服务条款
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  plain :disabled="isSendingCode" @click="generateVerificationCode">
              {{ isSendingCode ? '请勿重复点击' : '生成验证码' }}
            </el-button>

            <el-button plain style="" @click="loginByPhoneNumber">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>


</template>

<script>
import axios from "axios";
import CryptoJS from 'crypto-js';

export default {
  name: "login.vue",
  data() {
    return {
      form: {},
      loginByPhone:false,
      phoneNumber:"",
      phoneCode:"",
      visitedCount: 0,
      Agreed: '',
      isSendingCode : false,
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ]
      }
    }
  },
  mounted() {
    this.fetchStatistics();
  }
  ,
  methods: {
    startCountdown() {
      setTimeout(() => {
        this.isSendingCode = false;
      }, 120000); // 两分钟的倒计时，单位为毫秒
    },
    generateVerificationCode(){
      if(this.phoneNumber===undefined){
        this.$message({
          type: "error",
          message: "请输入手机号"
        })
        return
      }
      this.isSendingCode=true;
      axios.get("/api/user/registerByPhone",{
        params:{
          phone:this.phoneNumber
        }
      }).then(res => {
        if(res.data.code === 10000){
          this.$message({
            type: "success",
            message: res.data.data
          })
          this.startCountdown()
        }else{
          this.$message({
            type: "error",
            message: res.data.data
          })
        }
      })
    },
    login() {
      if(!this.Agreed){
        this.$message({
          type: "error",
          message: "请先同意隐私条款"
        })
        return
      }
      if(this.form.username===undefined||this.form.password===undefined){
        this.$message({
          type: "error",
          message: "请输入用户名和密码"
        })
        return
      }

      const decryptedPassword=CryptoJS.MD5(this.form.password).toString();
      const params = new URLSearchParams();
      params.append('username', this.form.username);
      params.append('password', decryptedPassword);

      axios.post('/api/user/login', params).then(res => {
        // console.log(res.data)
        if (res.data.code === 10000) {
          this.$message({
            type: "success",
            message: res.data.data
          })
          this.$router.push("/interview")
        } else {
          this.$message({
            type: "error",
            message: res.data.data
          })
        }
      })
    },
    loginByPhoneNumber() {
      if(this.phoneNumber===undefined){
        this.$message({
          type: "error",
          message: "请输入手机号"
        })
        return
      }
      if(this.phoneCode===undefined){
        this.$message({
          type: "error",
          message: "请输入验证码"
        })
        return
      }
      axios.get('/api/user/loginByPhone',{
        params: {
          phone : this.phoneNumber,
          code : this.phoneCode
        }
      }).then(res => {
        if(!this.Agreed){
          this.$message({
            type: "error",
            message: "请先同意隐私条款"
          })
          return
        }
        if (res.data.code === 10000) {
          this.$message({
            type: "success",
            message: res.data.data
          })
          this.$router.push("/interview")
        } else {
          this.$message({
            type: "error",
            message: res.data.data
          })
        }
      })
      // const encryptedPassword=CryptoJS.MD5(this.form.password).toString();
      // const params = new URLSearchParams();
      // params.append('username', this.form.username);
      // params.append('password', encryptedPassword);
      // axios.post("/api/user/register",params).then(res => {
      //   if (res.data.code === 10000) {
      //     this.$message({
      //       type: "success",
      //       message: res.data.data
      //     })
      //     this.$router.push("/interview")
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: res.data.data
      //     })
      //   }
      // })
    },
    fetchStatistics() {
      axios.get('/api/visited/page/interview')
          .then((response) => {
            // console.log(1)
            this.visitedCount = response.data.data;
          })
      axios.get('/api/visited/count/interview')
    },
  },

}

</script>

<style scoped>
.login-header {
  background: #fff;
  border-bottom: 1px solid #e4e4e4;
}

.login-footer {
  display: flex;
  float: bottom;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 60vh; /* 设置容器高度，这里使用视口高度作为示例 */

}

.login-1 {

  width: 400px;
  height: 350px;
  box-shadow: 2px 2px 10px #909090;
  padding: 30px;
  margin: 100px 500px 20px auto;

}

.login-2 {
  width: 350px
}

.login-3 {
  display: flex;
  justify-content: center;
  color: #0c1504;
  font-size: 20px;
  text-align: center;
  padding-bottom: 40px;
  padding-left: 40px
}

.body {
  background-image: url('../assets/img/login.png');
  background-size: cover;
  background-position: center ;
  background-repeat: no-repeat;
}
</style>